<script setup lang="ts">
import { Cell, CellState } from '~/sudoku/cell';
import { generator } from '@forfuns/sudoku'

let puzzles = generator(0)
console.log(puzzles)

let focusIndex = ref<Cell | undefined>();

let cells = ref(new Array(81));
let str = ''

for (var i = 0; i < cells.value.length; i++) {
  cells.value[i] = new Cell(puzzles[i], i, puzzles[i]);
  str += " " + (puzzles[i] == -1 ? 0 : puzzles[i])+'-'+i
  if (1 % 9 == 0) {
    console.log(str);
    str = ''
  }
}

const cellStyle = (cell: Cell) => {
  if (focusIndex.value != null && focusIndex.value.index == cell.index) {
    return "cellfocus";
  } else if (cell.state == CellState.tip) {
    return "cellTip";
  } else if (cell.state == CellState.same) {
    return "cellfocus";
  } else {
    return "cellNormal";
  }
}

const getCell = (rows: number, columns: number): Cell => {
  let cell = cells.value[(rows - 1) * 9 + columns - 1];
  if (isProxy(cell)) {
    let raw = toRaw(cell);
    return raw;
  }
  return cell;
}

const clickCell = (cell: Cell) => {
  focusIndex.value = cell;
  let rowIndex = Math.floor(cell.index / 9);
  let columnIndex = cell.index % 9

  let row3Index = Math.floor(rowIndex / 3);
  let column3Index = Math.floor(columnIndex / 3);
  console.log('rowIndex: ' + rowIndex + " columnIndex:" + columnIndex)
  console.log('row3Index: ' + row3Index + " column3Index:" + column3Index)

  for (var i = 0; i < cells.value.length; i++) {
    let current = toRaw(cells.value[i]) as Cell
    if (cell.display != -1 && cell.display == current.display) {
      current.state = CellState.same
    } else if (Math.floor(i / 9) == rowIndex || i % 9 == columnIndex) {
      current.state = CellState.tip
    } else if (Math.floor(i / 9 / 3) == row3Index && Math.floor(i % 9 / 3) == column3Index) {
      current.state = CellState.tip
    } else {
      current.state = CellState.normal
    }
  }
}

const input = (value: number) => {
  console.log("input:" + value)
  if (focusIndex.value != undefined) {
    cells.value[focusIndex.value.index] = new Cell(value, focusIndex.value.index, focusIndex.value.display)
  }
}

// const { Sudoku , generator } = require('@forfuns/sudoku')

// let puzzle = generator(0);
// console.log('puzzle: '+puzzle);

</script>
<template>
  <div class="grid lg:grid-cols-2 my-4">
    <div class="board mx-auto lg:mr-0  w-11/12 aspect-square">
      <template v-for="index in 9">
        <div class="hline"></div>
        <div class="line">
          <template v-for="i in 9">
            <div class="vline"></div>
            <button @click="clickCell(getCell(index, i))" :class="cellStyle(getCell(index, i))">
              {{ getCell(index, i).onDisPlay() }}</button>
            <div v-if="i == 9" class="vline"></div>
          </template>
        </div>
        <div v-if="index == 9" class="hline"></div>
      </template>
    </div>

    <div class="mx-auto grid grid-cols-9 lg:grid-cols-3 gap-4 lg:ml-4 mt-4 lg:mt-0 lg:h-96 h-20 w-72">
      <button class="text-3xl font-normal bg-slate-100 hover:bg-slate-300 rounded-md  font-" v-for="index in 9"
        @click="input(index)">
        {{ index }}
      </button>
    </div>
  </div>


</template>

<style lang="postcss">
.cellfocus {
  @apply flex-1 bg-blue-500
}

.cellTip {
  @apply flex-1 bg-blue-100
}

.cellNormal {
  @apply flex-1 bg-white
}

.board {
  display: flex;
  flex-direction: column;
}

.hline {
  width: 100%;
  height: 1px;
  background-color: black;
}

.vline {
  width: 1px;
  height: 100%;
  background-color: black;
}

.line {
  flex: 1;
  display: flex;
}

.lineEnd {
  border-bottom: 1px solid #000;
}

.cell {
  flex: 1;
  text-align: center;
  position: relative;
  background-color: bisque;
  margin: auto;
}

a {
  text-decoration: none;
}

a:hover {
  background-color: aquamarine;
}

.cellend {
  border-right: 1px solid black;
}
</style>